<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card class="access" shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="tools-fill" />
              待维修设备清单
            </div>
          </div>
          <!-- <vab-query-form>
            <vab-query-form-left-panel :span="12"></vab-query-form-left-panel>
            <vab-query-form-right-panel :span="12">
              <el-form :inline="true" :model="queryForm" @submit.native.prevent>
                <el-form-item>
                  <el-input
                    v-model.trim="queryForm.MatchString"
                    clearable
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="queryData"
                  >
                    查询
                  </el-button>
                </el-form-item>
              </el-form>
            </vab-query-form-right-panel>
          </vab-query-form> -->
          <el-table :data="list1" style="width: 100%">
            <el-table-column label="故障编号" prop="FaultId" />
            <el-table-column label="设备名称" prop="DeviceName" />
            <el-table-column label="故障类型" prop="FaultType" />
            <el-table-column label="故障码" prop="FaultCode" />
            <el-table-column label="故障等级" prop="FaultLevel">
              <template slot-scope="scope">
                <template v-if="scope.$index % 2 == 0">
                  <el-tag type="warning">普通故障</el-tag>
                </template>
                <template v-else>
                  <el-tag type="danger">严重故障</el-tag>
                </template>
              </template>
            </el-table-column>
            el-table-column label="故障内容" prop="FaultContent" />
            <el-table-column label="所属产线" prop="AffiliationLine" />
            <el-table-column label="发生时间" prop="Time" />
            <template slot="empty">
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
          <el-pagination
            background
            :current-page="queryForm1.pageNo"
            :layout="layout"
            :page-size="queryForm1.pageSize"
            :total="total1"
            @current-change="handleCurrentChange1"
            @size-change="handleSizeChange1"
          />
        </el-card>
      </el-col>
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card class="access" shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="tools-fill" />
              维修记录
            </div>
          </div>
          <!-- <vab-query-form>
            <vab-query-form-left-panel :span="12"></vab-query-form-left-panel>
            <vab-query-form-right-panel :span="12">
              <el-form :inline="true" :model="queryForm" @submit.native.prevent>
                <el-form-item>
                  <el-input
                    v-model.trim="queryForm.MatchString"
                    clearable
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="queryData"
                  >
                    查询
                  </el-button>
                </el-form-item>
              </el-form>
            </vab-query-form-right-panel>
          </vab-query-form> -->
          <el-table :data="list2" style="width: 100%">
            <el-table-column label="故障编号" prop="FaultId" />
            <el-table-column label="设备名称" prop="DeviceName" />
            <el-table-column label="故障类型" prop="FaultType" />
            <el-table-column label="故障码" prop="FaultCode" />
            <el-table-column label="故障等级" prop="FaultLevel">
              <template slot-scope="scope">
                <template v-if="scope.$index % 2 == 0">
                  <el-tag type="warning">普通故障</el-tag>
                </template>
                <template v-else>
                  <el-tag type="danger">严重故障</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="故障内容" prop="FaultContent" />
            <el-table-column label="所属产线" prop="AffiliationLine" />
            <el-table-column label="发生时间" prop="Time" />
            <template slot="empty">
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
          <el-pagination
            background
            :current-page="queryForm2.pageNo"
            :layout="layout"
            :page-size="queryForm2.pageSize"
            :total="total2"
            @current-change="handleCurrentChange2"
            @size-change="handleSizeChange2"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { RealTimeList, HistoryList, FaultIdDelete } from '@/api/equipment'

  export default {
    data() {
      return {
        queryForm1: {
          pageNo: 1,
          pageSize: 10,
          MatchString: '',
        },
        total1: 0,
        list1: [],

        queryForm2: {
          pageNo: 1,
          pageSize: 10,
          MatchString: '',
        },
        total2: 0,
        list2: [],
        layout: 'total, sizes, prev, pager, next, jumper',
      }
    },
    created() {
      this.initData()
    },
    methods: {
      handleSizeChange1(val) {
        this.queryForm1.pageSize = val
        this.fetchData1()
      },
      handleCurrentChange1(val) {
        this.queryForm1.pageNo = val
        this.fetchData1()
      },
      handleSizeChange2(val) {
        this.queryForm2.pageSize = val
        this.fetchData2()
      },
      handleCurrentChange2(val) {
        this.queryForm2.pageNo = val
        this.fetchData2()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      fetchData1() {
        this.listLoading = true
        const params = {
          Index: this.getPage(this.queryForm1.pageNo, this.queryForm1.pageSize),
          Count: this.queryForm1.pageSize,
          MatchString: this.queryForm1.MatchString,
          State: '未维修',
        }
        RealTimeList(params).then((res) => {
          this.list1 = res.RealTimeFaultInfo
          this.total1 = res.TotalCount
          this.listLoading = false
        })
      },
      fetchData2() {
        this.listLoading = true
        const params = {
          Index: this.getPage(this.queryForm2.pageNo, this.queryForm2.pageSize),
          Count: this.queryForm2.pageSize,
          MatchString: this.queryForm2.MatchString,
          State: '未维修',
        }
        HistoryList(params).then((res) => {
          this.list2 = res.HistoryFaultInfo
          this.total2 = res.TotalCount
          this.listLoading = false
        })
      },
      initData() {
        this.fetchData1()
        this.fetchData2()
      },
    },
  }
</script>
